<template>
  <div>
    <h2>事件绑定指令</h2>
  <!-- 事件绑定指令语法: v-on:事件名="处理程序" v-on: 可以简写 @ -->
  <!-- <button v-on:事件名="处理程序">按钮</button> -->
  <!-- <button @事件名="处理程序">按钮</button> -->
    <p>{{age}} </p>
    <p> </p>
  <!-- 事件处理程序，如果代码非常简单，直接写到 <template> 这个区域即可 -->
  <!-- 处理程序，代码只能使用vue中定义好的 data 数据 或 methods 方法 -->
  <button v-on:click="age++">+1</button>

  <!-- 事件处理程序，如果代码非常多,可以用方法,方法必须定义到和data平级的methods中 -->
  <button @click="changeAge">按钮</button>
  </div>
</template>

<script>
export default {
  // data 是储存数据的
  data(){
    return {
      age: 20
    }
  },
  // methods 是储存方法的
  methods: {
    changeAge (){
      // vue中,找data数据,methods方法等等 都是通过this直接找  这个是vue中固定的
      this.age--
      console.log(11);
    }

  },
}
</script>

<style>

</style>